<template>
  <div class="app-container">
    <el-table
      :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
      border
      style="width: 100%">
      <el-table-column
        label="订单编号"
        prop="orderId">
      </el-table-column>
      <el-table-column
        label="用户编号"
        prop="userId">
      </el-table-column>
      <el-table-column
        label="商品编号"
        prop="productId">
      </el-table-column>
      <el-table-column
        label="商品数量"
        prop="productNum">
      </el-table-column>
      <el-table-column
        label="商品价格"
        prop="productPrice">
      </el-table-column>
      <el-table-column
        label="订单时间"
        prop="orderTime"
        sortable
        width="190"
      >
        <template slot-scope="scope">
          <div class="block">
            <el-date-picker
              v-model="scope.row.orderTime"
              format="yyyy 年 MM 月 dd 日"
              readonly
              size="mini"
              type="date"
            />
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="处理"
        prop="checked"
        sortable
      >
        <template slot-scope="scope">
          <span :style="'color:'+['#F56C6C','#67C23A'][scope.row.checked]">
            {{ lable[scope.row.checked] }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            @click="handleChecked(scope.$index, scope.row)">处理
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <div class="block" style="text-align:center;">
      <el-pagination
        :current-page="currentPage"
        :page-size="pageSize"
        :page-sizes="[10, 50, 100, 200, 400]"
        :total="tableData.length"
        background
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import axios from 'axios'

const options = {
  inject: ['reload'],
  async mounted() {
    const resp = await axios.get('http://ip.usts.fun:9529/order/list');
    this.tableData = resp.data.data
  },
  data: function () {
    return {
      lable: [
        '未处理',
        '已处理'
      ],
      tableData: [],
      currentPage: 1, // 当前页码
      // total: 20, // 总条数
      pageSize: 10 // 每页的数据条数
    }
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.currentPage = 1;
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
    },
    async handleChecked(idx, val) {
      if (val.checked === 1) {
        this.$message({
          type: 'info',
          message: '该订单已处理！'
        })
        return;
      }
      // console.log(val.id);
      const newData = await axios.post('http://localhost:8080/order/checkedById', {}, {
        params: {
          id: val.id,
          isChecked: val.checked
        }
      }).then(res => {
        console.log('success') //调用成功
        this.reload()
        this.$message({
          type: 'info',
          message: '处理成功！'
        })
      }, res => {
        console.log('error')   //调用失败
      })
    },
  }
}
export default options;
</script>
<style>
.el-date-editor.el-input, .el-date-editor.el-input__inner {
  width: 170px;
}
</style>
